<template>
	<view class="towstage" @touchmove.stop.prevent="moveHandle">
		<scroll-view :class="['left',showHeader == false?'left_h5':'left_app']" :scroll-y="true" scroll-with-animation
			:scroll-top="scrollTop">
			
			<view v-for="(item, index) in classList" :key="index"
				:class="'classTitle ' + (current == index ? 'actives':'')" @tap="setCurrent(item, index)"
				:style="{color:current == index ?colors:''}">
				<text>{{item.name}}</text>
				<view class="classactive" v-if="current == index" :style="'background-color:' + colors">
				</view>
			</view>
		</scroll-view>
		<scroll-view :class="['right',showHeader == false?'right_h5':'right_app']" :scroll-y="true"
			:scroll-with-animation="true">
			<u-alert-tips type="warning" :title="title" :description="description" :close-able="true" :show="showTips" :title-style ="{textAlign:`center;`}" @close="showTips=false"></u-alert-tips>

			<view class="goods_list" v-if="dataList.length !== 0">
				
				<view v-for="(item, index) in dataList"  @tap="jumpDetail(item)" :key="index" class="class2_item">
					<view class="class2_item_left">
						<view class="brand_name">-{{item.brand}}-</view>
						<image :src="item.icon"></image>
					</view>
					
					<view class="goods_right">
						<view class="goods_name">{{item.name}}</view>
						<view class="numbers">
							<text v-if="item.youhui == true">优惠券</text>
							<text v-if="item.baoyou == true">包邮</text>
						</view>
						<view class="price">
							<text class="money">￥{{item.price}}</text>
							<text class="hx_money">￥{{item.point_price}}</text>
				
						</view>
						<view class="icon" @click.stop="addColorCard(item)">
							<u-icon name="plus-circle-fill" color="#fa436a" size="48" ></u-icon>
						</view>
					</view>
				</view>
				<view class="nodata">—— 到底啦 ——</view>
			</view>
			<view class="zanwu" v-if="dataList.length == 0">
				<text class="iconfont icon-none" style="font-size: 32upx"></text>
				<text style="font-size: 24upx">暂无商品</text>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import Vue from 'vue'
	
	Vue.mixin({
		methods: {
			setData: function(obj, callback) {
				let that = this;
				const handleData = (tepData, tepKey, afterKey) => {
					tepKey = tepKey.split('.');
					tepKey.forEach(item => {
						if (tepData[item] === null || tepData[item] === undefined) {
							let reg = /^[0-9]+$/;
							tepData[item] = reg.test(afterKey) ? [] : {};
							tepData = tepData[item];
						} else {
							tepData = tepData[item];
						}
					});
					return tepData;
				};
				const isFn = function(value) {
					return typeof value == 'function' || false;
				};
				Object.keys(obj).forEach(function(key) {
					let val = obj[key];
					key = key.replace(/\]/g, '').replace(/\[/g, '.');
					let front, after;
					let index_after = key.lastIndexOf('.');
					if (index_after != -1) {
						after = key.slice(index_after + 1);
						front = handleData(that, key.slice(0, index_after), after);
					} else {
						after = key;
						front = that;
					}
					if (front.$data && front.$data[after] === undefined) {
						Object.defineProperty(front, after, {
							get() {
								return front.$data[after];
							},
							set(newValue) {
								front.$data[after] = newValue;
								that.$forceUpdate();
							},
							enumerable: true,
							configurable: true
						});
						front[after] = val;
					} else {
						that.$set(front, after, val);
					}
				});
				isFn(callback) && this.$nextTick(callback);
			}
		}
	});
	
	export default {
		data() {
			return {
				scrollTop: 0,
				title:'广州泰新布业',
				description:`专业针织厂家-现货供应-专供二批-免费提供色片色卡`,
				showTips:true

			};
		},


		props: {
			colors: {
				type: String
			},

			classList: {
				type: Array
			},
			dataList: {
				type: Array
			},
			current: {
				type: Number,
				default: 0
			},
			showHeader: { //用来控制在APP下样式
				type: Boolean,
				default: false
			},

		},
		methods: {
			moveHandle() {},
			setCurrent(item, index) {
				//设置tab
				let scrollTop = index * 20;
				if (index <= 2) {
					scrollTop = 0;
				}
				this.setData({
					current: index,
					scrollTop: scrollTop,
				});
				this.$emit('cateClick', item)
			},



			jumpDetail(e) {
				
				this.$emit("itemClick",e);
			},
			// 添加到索取色卡列表
			addColorCard(item){
				this.$emit('addColorCard',item);
			}

		}
	};
</script>
<style scoped lang="scss">
	@import "./twoCate.scss";
	.class2_item{
		width: 100%;
		height: 230rpx;
		margin-bottom: 60rpx;
		background-color: #fff;
		position: relative;
		display: flex;
		border-radius: 18rpx;
		box-shadow: 10rpx 10rpx 10rpx #bebebe, -10rpx -10rpx 30rpx #eee;
	}
	.class2_item_left{
		width: 175rpx;
		height: 225rpx;
		position: absolute;
		top: -50rpx;
		margin: 20rpx 20rpx 0rpx 15rpx;
		position: relative;
		box-shadow: 10rpx 10rpx 10rpx #bebebe, -10rpx -10rpx 30rpx #eee;	
		border-radius: 10rpx;
		overflow: hidden;
		z-index: 999;
	}
	.class2_item_left .brand_name{
		width: 175rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 25rpx;
		text-align: center;
		font-style: italic;
		font-weight: 700;
		color: #cd7f32;
		border-radius: 15rpx 15rpx 0 0;
		background-color: #fff;
	}
	.class2_item_left image{
		width: 175rpx;
		height: 175rpx;
	}
</style>